
<template>
    <div class="iframe-cont">
        <div class="content">
            <div class="title">{{$route.meta.title}}</div>
            <el-divider></el-divider>
            <!--     筛选区       -->
            <div class="f f-a-c">
                <search-date :show-title="false" clearable
                    @select="handleDate"
                ></search-date>
                <el-input class="search-group mar-left-20"
                          style="width: 220px"
                          placeholder="设备编号/主板号"
                          size="small"
                          clearable
                          v-model="queryParams.keyword"
                          @keydown.native.enter="handleQuery"
                >
                    <el-button slot="append" icon="el-icon-search" @click="handleQuery"></el-button>
                </el-input>
                <div class="f-1"></div>
                <el-button style="margin-left: 20px" type="primary" size="small" icon="el-icon-plus" @click="addRepair">添加维修记录</el-button>
            </div>

            <el-table class="table th-bg" :data="lists"  v-loading="loading"  element-loading-text="加载中" element-loading-spinner="el-icon-loading">
                <el-table-column label="序号" prop="name" width="60" fixed>
                    <template slot-scope="scope">
                        <span>{{(queryParams.page - 1) * queryParams.limit + scope.$index + 1}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="设备出厂编号" prop="macCode"></el-table-column>
                <el-table-column label="维修内容" prop="repairContent"></el-table-column>
                <el-table-column label="维修人员" prop="repairName"></el-table-column>
                <el-table-column label="维修日期" prop="repairTime"></el-table-column>
                <el-table-column label="操作" width="150px" align="center" fixed="right">
                    <template slot-scope="{row}">
                        <el-button style="color: #3487E8" type="text" @click="gotoDeviceDetail(row)">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination
                v-show="total>0"
                :total="total"
                :page.sync="queryParams.page"
                :limit.sync="queryParams.limit"
                @pagination="getList"
            />
        </div>
    </div>
</template>

<script>
    import SearchDate from "@/components/SearchCondition/SearchDate";
    export default {
        name: "index",
        components: {SearchDate},
        data(){
            return{
                lists:[1],
                loading:false,//加载中
                paramDialog: false,
                fillDialog: true,
                total:10,
                queryParams: {
                    page:1,
                    limit: this.$tmp.PAGE_SIZES[0], //页长
                    startTime: '',
                    endTime: '',
                    keyword: ''
                }
            }
        },
        created() {
            this.getList();
        },
        methods:{
            handleDate(e) {
                this.queryParams.startTime=e[0];
                this.queryParams.endTime=e[1]
                this.handleQuery()
            },
            handleQuery() {
                this.queryParams.page = 1
                this.getList()
            },
            gotoDeviceDetail(row) {
                this.$router.push('/device/afterSold/detail?id=' + row.id)
            },
            addRepair() {
                this.$router.push('/device/afterSold/addRepair')
            },
            //获取数据
            getList() {
                this.loading = true;
                this.$http({
                    url:'/api/machine/repair/page',
                    method: 'get',
                    data: this.queryParams
                }).then((res)=>{
                    this.lists = res.data;
                    this.total = res.count;
                }).finally(() => {
                    setTimeout(() => {
                        this.loading = false
                    },200)
                })
            },
        }
    }
</script>

<style lang="scss" scoped>
::v-deep input::-webkit-outer-spin-button,
::v-deep input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
::v-deep input[type="number"]{
    -moz-appearance: textfield;
}
::v-deep .el-form-item__content {
    margin-left: 10px;
}
.form-item {
    width: 400px;
}
.form-comp-item {
    width: 240px;
}
.table {
    margin-top: 20px;
}
</style>
